<template>
  <div class="container">
    <div class="formWrapper">
      <div class="formItems px-3">
        <div class="formItem justify-center">
          <n-spin size="small">
            <template #description>
              <div class="tip">正在退出</div>
            </template>
          </n-spin>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from "@/utils/request";
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const message = useMessage();
window.$message = useMessage();

const redirect = route.query.redirect as string;

onMounted(() => {
  request({
    url: "/auth/logout",
    method: "POST",
  })
    .then(() => {
      window.localStorage.removeItem("authorized");
      window.location.replace(redirect);
    })
    .catch(() => {
      router.push({
        name: "400",
        state: {
          redirect,
        },
        replace: true,
      });
    });
})
</script>

<style scoped lang="scss">
.container {
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #333639;
  font-family: "Microsoft YaHei", Helvetica, "PingFang SC";
}

.tip {
  margin-top: 10px;
  font-size: 13px;
  color: #333639;
}

.px-3 {
  padding-left: 3px !important;
  padding-right: 3px !important;
}

.formWrapper {
  width: 380px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  .formItems {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 25px;
    > .formItem {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
}

.justify-center {
  justify-content: center;
}
</style>
